<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-content">
				<u-icon name="arrow-left" size="22" color="#303133" @click="goBack"></u-icon>
				<view class="search-wrapper">
					<u-input placeholder="搜索商家、品类或商圈" v-model="searchValue" border="none" placeholderStyle="color: #999"
						:customStyle="{
							backgroundColor: '#f5f5f5',
							borderRadius: '20px',
							height: '36px',
							fontSize: '14px',
							padding: '0 10px'
						}" suffixIcon="search" suffixIconStyle="color: #fff"></u-input>
				</view>
				<view class="nav-icons">
					<u-icon name="star" size="20" color="#303133" @click="addFavorite"></u-icon>
					<u-icon name="share" size="20" color="#303133" @click="shareKTV"></u-icon>
					<u-icon name="more-dot-fill" size="20" color="#303133" @click="showMore"></u-icon>
				</view>
			</view>
		</view>

		<!-- KTV基本信息 -->
		<view class="ktv-info-section">
			<view class="ktv-main-info">
				<view class="ktv-image">
					<image :src="ktvInfo.image" mode="aspectFill"></image>
					<view class="photo-overlay" @click="viewPhotos">
						<text>相册</text>
						<u-icon name="arrow-right" size="12" color="#fff"></u-icon>
					</view>
				</view>
				<view class="ktv-details">
					<view class="ktv-title">
						<text class="ktv-name">{{ ktvInfo.name }}</text>
						<view class="verified-badge" v-if="ktvInfo.verified">
							<u-icon name="checkmark" size="12" color="#fff"></u-icon>
						</view>
					</view>
					<view class="ranking-info">
						<text>{{ ktvInfo.ranking }}</text>
						<u-icon name="arrow-right" size="12" color="#999"></u-icon>
					</view>
					<view class="rating-info">
						<view class="stars">
							<text class="star-level">暂无星级</text>
							<text class="review-count">{{ ktvInfo.reviewCount }}人评</text>
							<u-icon name="arrow-right" size="12" color="#999"></u-icon>
						</view>
						<view class="category-tag">
							<text>{{ ktvInfo.category }}</text>
							<u-icon name="arrow-right" size="12" color="#999"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<!-- 营业时间和地址 -->
			<view class="business-info">
				<view class="business-hours">
					<text class="status">{{ ktvInfo.businessStatus }}</text>
					<text class="hours">{{ ktvInfo.businessHours }}</text>
					<text class="platform">{{ ktvInfo.platform }}</text>
					<view class="info-action">
						<text>信息/设施</text>
						<u-icon name="arrow-right" size="12" color="#999"></u-icon>
					</view>
				</view>
				<view class="address-info">
					<text class="address">{{ ktvInfo.address }}</text>
					<u-icon name="arrow-right" size="12" color="#999"></u-icon>
				</view>
				<view class="distance-info">
					<view class="distance-info-left">
						<u-icon name="map" size="16" color="#999"></u-icon>
						<text>距您驾车{{ ktvInfo.driveDistance }}，需{{ ktvInfo.driveTime }}</text>
					</view>

					<view class="action-buttons">
						<view class="action-btn" @click="navigateToKTV">
							<u-icon name="phone-fill" size="20" color="#333"></u-icon>
							<text>电话</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 选项卡导航 -->
		<view class="tab-navigation">
			<view class="tab-items">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ active: currentTab === index }" @click="switchTab(index)">
					<text>{{ tab.name }}</text>
				</view>
			</view>
		</view>

		<!-- 预订内容区域 -->
		<view class="content-section" v-if="currentTab === 0">
			<!-- 日期选择器 -->
			<view class="date-selector">
				<view class="date-list">
					<view v-for="(date, index) in dateList" :key="index" class="date-item"
						:class="{ active: selectedDateIndex === index }" @click="selectDate(index)">
						<text class="date-label">{{ date.label }}</text>
						<text class="date-value">{{ date.value }}</text>
					</view>
				</view>
			</view>

			<!-- 时间段选择 -->
			<view class="time-selector">
				<view class="time-title">
					<text>时间段</text>
				</view>
				<view class="time-slots">
					<view v-for="(slot, index) in timeSlots" :key="index" class="time-slot"
						:class="{ active: selectedTimeIndex === index }" @click="selectTime(index)">
						<text class="time-range">{{ slot.range }}</text>
						<text class="time-desc">{{ slot.desc }}</text>
						<text class="time-price">¥{{ slot.price }}起</text>
					</view>
				</view>
			</view>

			<!-- 房型选择 -->
			<view class="room-selector">
				<view class="room-title">
					<text>房型</text>
					<!-- 测试按钮 -->
					<!-- <view style="background: #fa436a; color: #fff; padding: 10rpx 20rpx; border-radius: 8rpx; margin-left: 20rpx; font-size: 24rpx;" @click="testPopup">
						<text>测试弹窗</text>
					</view> -->
				</view>
				<view class="room-list">
					<view v-for="(room, index) in roomTypes" :key="index" class="room-item" @click="selectRoom(room)">
						<view class="room-image">
							<image :src="room.image" mode="aspectFill"></image>
						</view>
						<view class="room-info">
							<text class="room-name">{{ room.name }}</text>
							<text class="room-desc">{{ room.desc }}</text>
							<view class="room-price">
								<text class="current-price">¥{{ room.price }}</text>
								<text class="time-unit">/{{ room.unit }}</text>
							</view>
							<view class="room-status" v-if="room.status">
								<text
									:class="room.status === '有房' ? 'available' : (room.status === '已满' ? 'unavailable' : 'warning')">{{
										room.status }}</text>
							</view>
						</view>
						<view class="room-action">
							<view class="book-btn" :class="{ disabled: room.status === '已满' }">
								<text>{{ room.status === '已满' ? '已满' : '预订' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 团购内容区域 -->
		<view class="content-section" v-if="currentTab === 1">
			<!-- 套餐分类 -->
			<view class="package-categories">
				<view v-for="(category, index) in packageCategories" :key="index" class="category-item"
					:class="{ active: currentCategory === index }" @click="switchCategory(index)">
					<text>{{ category }}</text>
				</view>
			</view>

			<!-- 套餐列表 -->
			<view class="package-list">
				<view v-for="(package_, index) in packageList" :key="index" class="package-item">
					<view class="package-image">
						<image :src="package_.image" mode="aspectFill"></image>
					</view>
					<view class="package-info">
						<text class="package-title">{{ package_.title }}</text>
						<view class="package-tags">
							<text v-for="tag in package_.tags" :key="tag" class="tag">{{ tag }}</text>
						</view>
						<view class="package-price">
							<text class="current-price">¥{{ package_.price }}</text>
							<text class="discount">{{ package_.discount }}</text>
							<text class="original-price">¥{{ package_.originalPrice }}</text>
						</view>
						<view class="package-promotion" v-if="package_.promotion">
							<text class="promotion-label">{{ package_.promotion.label }}</text>
							<text class="promotion-desc">{{ package_.promotion.desc }}</text>
							<u-icon name="arrow-right" size="12" color="#fa436a"></u-icon>
						</view>
						<view class="package-sales">
							<text class="sales-info">年售{{ package_.sales }}</text>
						</view>
					</view>
					<view class="package-action">
						<view class="buy-btn" @click="buyPackage(package_)">
							<text>抢购</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 评价内容区域 -->
		<view class="content-section" v-if="currentTab === 2">
			<view class="reviews-placeholder">
				<view class="placeholder-icon">
					<u-icon name="star" size="48" color="#ccc"></u-icon>
				</view>
				<text class="placeholder-text">暂无评价</text>
				<text class="placeholder-desc">快来写下您的体验吧</text>
			</view>
		</view>

		<!-- 更多推荐内容区域 -->
		<view class="content-section" v-if="currentTab === 3">
			<view class="recommendations-placeholder">
				<view class="placeholder-icon">
					<u-icon name="list" size="48" color="#ccc"></u-icon>
				</view>
				<text class="placeholder-text">暂无推荐</text>
				<text class="placeholder-desc">敬请期待更多精彩内容</text>
			</view>
		</view>

		<!-- 预订弹窗 -->
		<u-popup :show="showBookingPopup" mode="bottom" border-radius="20" :safe-area-inset-bottom="true"
			@close="closeBookingPopup">
			<view class="booking-popup">
				<!-- <view class="popup-header">
					<view class="popup-close" @click="closeBookingPopup">
						<u-icon name="close" size="20" color="#999"></u-icon>
					</view>
					<view class="popup-notice">
						<text>预订必有房：立即确认</text>
					</view>
				</view> -->

				<view class="booking-info">
					<view class="ktv-name">
						<u-icon name="home" size="16" color="#666"></u-icon>
						<text>{{ ktvInfo.name }}</text>
					</view>
					<view class="booking-details">
						<text class="detail-title">{{ selectedPackage.title }}</text>
						<view class="selected-info">
							<text>已选时间：{{ selectedDate }} {{ selectedTime }}</text>
						</view>
						<view class="booking-policy">
							<text>退改规则：{{ refundPolicy }}</text>
							<u-icon name="arrow-right" size="12" color="#fa436a"></u-icon>
						</view>
					</view>
				</view>

				<!-- 开唱时间选择 -->
				<view class="time-selection">
					<view class="section-title">开唱时间</view>
					<view class="time-grid">
						<view v-for="(time, index) in bookingTimeSlots" :key="index" class="time-slot"
							:class="{ active: selectedBookingTimeIndex === index }" @click="selectBookingTime(index)">
							<text class="time-hour">{{ time.hour }}</text>
							<text class="time-label">{{ time.label }}</text>
							<text class="time-detail">{{ time.detail }}</text>
						</view>
					</view>
				</view>

				<!-- 价格明细 -->
				<view class="price-summary">
					<view class="price-item">
						<text>商品总价（共1件）</text>
						<text class="price">¥{{ selectedPackage.originalPrice || selectedPackage.price }}</text>
					</view>
					<view class="discount-item">
						<view class="discount-icon">
							<text>惠</text>
						</view>
						<text>预订优惠</text>
						<text class="discount-price">-¥{{ discountAmount }}</text>
					</view>
					<view class="coupon-item">
						<view class="coupon-icon">
							<text>券</text>
						</view>
						<text>商家优惠券</text>
						<text class="coupon-status">暂无可用</text>
						<u-icon name="arrow-right" size="12" color="#999"></u-icon>
					</view>
					<view class="coupon-item">
						<view class="coupon-icon">
							<text>券</text>
						</view>
						<text>美团优惠券</text>
						<text class="coupon-status">暂无可用</text>
						<u-icon name="arrow-right" size="12" color="#999"></u-icon>
					</view>
				</view>

				<view class="price-total">
					<view class="total-line">
						<text class="total-left">优惠 ¥{{ discountAmount }}</text>
						<text class="total-right">小计 ¥{{ finalPrice }}</text>
					</view>
					<text class="service-fee">（含2元服务费）</text>
				</view>

				<!-- 支付方式 -->
				<view class="payment-methods">
					<view class="payment-item" :class="{ active: selectedPayment === 'quick' }"
						@click="selectPayment('quick')">
						<view class="payment-icon quick">
							<u-icon name="flash" size="20" color="#fa436a"></u-icon>
						</view>
						<view class="payment-info">
							<text class="payment-title">极速支付</text>
							<text class="payment-desc">一键下单支付，安全又省心</text>
							<view class="payment-bonus">
								<text>送8元外卖券</text>
							</view>
						</view>
						<view class="payment-check">
							<u-icon name="checkmark" size="16" color="#fff" v-if="selectedPayment === 'quick'"></u-icon>
						</view>
					</view>
					<view class="payment-item" :class="{ active: selectedPayment === 'monthly' }"
						@click="selectPayment('monthly')">
						<view class="payment-icon monthly">
							<text>月付</text>
						</view>
						<view class="payment-info">
							<text class="payment-title">美团月付</text>
							<view class="payment-benefits">
								<text>立减3.68元</text>
								<text>免息+立减0.28元</text>
								<text>立减</text>
							</view>
						</view>
						<view class="payment-check">
							<u-icon name="checkmark" size="16" color="#fff"
								v-if="selectedPayment === 'monthly'"></u-icon>
						</view>
					</view>
				</view>

				<!-- 底部确认 -->
				<view class="booking-footer">
					<view class="total-price">
						<text class="total-label">合计 ¥{{ totalPrice }}</text>
						<text class="discount-label">优惠 ¥{{ discountAmount }}</text>
					</view>
					<view class="confirm-btn" @click="confirmBooking">
						<text>极速支付 ¥{{ finalPrice }}</text>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 团购弹窗 -->
		<u-popup :show="showGroupBuyPopup" mode="bottom" border-radius="20" :safe-area-inset-bottom="true"
			@close="closeGroupBuyPopup">
			<view class="group-buy-popup">
				<!-- 套餐标题和价格 -->
				<view class="package-header">
					<view class="package-title-section">
						<text class="package-title">{{ selectedGroupPackage.title }}</text>
						<!-- <view class="package-tags">
							<text v-for="tag in selectedGroupPackage.tags" :key="tag" class="tag">{{ tag }}</text>
						</view> -->
					</view>
					<view class="package-price-section">
						<view class="price-row">
							<text class="current-price">¥{{ selectedGroupPackage.price }}</text>
							<text class="discount">{{ selectedGroupPackage.discount }}</text>
							<text class="original-price">¥{{ selectedGroupPackage.originalPrice }}</text>
							<text class="sales-count">年售{{ selectedGroupPackage.sales }}</text>
						</view>
						<view class="promotion-info" v-if="selectedGroupPackage.promotion">
							<text class="promotion-tag">{{ selectedGroupPackage.promotion.label }}</text>
							<text class="promotion-desc">{{ selectedGroupPackage.promotion.desc }}</text>
							<text class="view-all">全部 ></text>
						</view>
					</view>
				</view>

				<!-- 团购详情 -->
				<view class="group-details">
					<!-- <view class="detail-title">团购详情</view> -->
					<view class="detail-content">
						<view class="detail-section">
							<view class="detail-icon">🎤</view>
							<view class="detail-info">
								<text class="detail-name">小包黄金档5小时</text>
								<text class="detail-count">1份</text>
								<text class="detail-price">588.0元</text>
							</view>
						</view>
						<view class="detail-specs">
							<text class="spec-item">人数：1~6人</text>
							<text class="spec-item">包型：小包</text>
							<text class="spec-item">适用时间：18:00~23:00</text>
							<text class="spec-item">时段：黄金档</text>
							<text class="spec-item">适用时长：5小时</text>
						</view>
					</view>
				</view>

				<!-- 购买须知 -->
				<view class="purchase-notes">
					<view class="notes-title">购买须知</view>
					<view class="notes-content">
						<text class="note-item">• 周一至周日全天可用 • 购买后90天内有效</text>
						<text class="note-item">• 随时退 • 过期退</text>
					</view>
				</view>

				<!-- 图文详情 -->
				<!-- <view class="image-details">
					<text class="details-title">图文详情</text>
				</view> -->

				<!-- 门市价 -->
				<view class="market-price">
					<text class="market-label">门市价</text>
					<text class="market-value">588元</text>
				</view>

				<!-- 底部操作栏 -->
				<view class="group-buy-footer">
					<!-- <view class="footer-left">
						<u-icon name="home" size="24" color="#666"></u-icon>
						<text>门店</text>
					</view>
					<view class="footer-center">
						<u-icon name="shopping-cart" size="24" color="#666"></u-icon>
						<text>购物车</text>
					</view> -->
					<view class="footer-right">
						<view class="buy-btn" @click="confirmGroupBuy">
							<text>团购 ¥{{ selectedGroupPackage.price }}</text>
							<text class="buy-subtitle">立即抢购</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchValue: '',
			currentTab: 0,
			currentCategory: 0,
			selectedDateIndex: 1, // 默认选择明天
			selectedTimeIndex: 0, // 默认选择第一个时间段
			selectedBookingTimeIndex: 0, // 默认选择第一个开唱时间
			showBookingPopup: false,
			selectedPackage: {},
			selectedPayment: 'quick',
			showGroupBuyPopup: false,
			selectedGroupPackage: {},
			ktvInfo: {
				name: '格莱美量贩式KTV',
				image: '/static/temp/ktv_detail.jpg',
				verified: true,
				ranking: '动物园/师范路KTV人气榜第2名',
				reviewCount: '4',
				category: '量贩式KTV',
				businessStatus: '营业中',
				businessHours: '17:00-次日02:00',
				platform: '美团充电宝',
				address: '无影山北路77号舜港大酒店102室',
				driveDistance: '10.4公里',
				driveTime: '19分钟'
			},
			tabs: [
				{ name: '预订', id: 'booking' },
				{ name: '团购', id: 'group' },
				// { name: '评价', id: 'reviews' },
				// { name: '更多推荐', id: 'recommendations' }
			],
			dateList: [
				{ label: '今天', value: '07-01' },
				{ label: '周二', value: '07-02' },
				{ label: '周三', value: '07-03' },
				{ label: '周四', value: '07-04' },
				{ label: '周五', value: '07-05' },
				{ label: '周六', value: '07-06' },
				{ label: '周日', value: '07-07' }
			],
			timeSlots: [
				{
					range: '19:00-次日02:00',
					desc: '夜场时段，任选2小时',
					price: '76'
				},
				{
					range: '14:00-18:00',
					desc: '下午场，任选4小时',
					price: '128'
				},
				{
					range: '10:00-14:00',
					desc: '上午场，任选4小时',
					price: '98'
				}
			],
			roomTypes: [
				{
					id: 1,
					name: '小包',
					desc: '3-6人，适合小型聚会',
					image: '/static/temp/room_small.jpg',
					price: '76',
					unit: '2小时',
					status: '有房'
				},
				{
					id: 2,
					name: '中包',
					desc: '6-10人，宽敞舒适',
					image: '/static/temp/room_medium.jpg',
					price: '128',
					unit: '2小时',
					status: '有房'
				},
				{
					id: 3,
					name: '豪华包',
					desc: '10-15人，豪华装修',
					image: '/static/temp/room_luxury.jpg',
					price: '268',
					unit: '2小时',
					status: '仅剩1间'
				},
				{
					id: 4,
					name: 'VIP包',
					desc: '15-20人，独享空间',
					image: '/static/temp/room_vip.jpg',
					price: '398',
					unit: '2小时',
					status: '已满'
				}
			],
			packageCategories: ['全部', '纯欢唱', '小包', '中包'],
			packageList: [
				{
					id: 1,
					title: '【K歌优惠】豪华装修KTV 夜场 4小时',
					image: '/static/temp/ktv_package1.jpg',
					tags: ['周末节假日通用', '小包', '纯欢唱'],
					price: '149',
					discount: '2.6折',
					originalPrice: '588',
					promotion: {
						label: '特惠促销',
						desc: '共省439'
					},
					sales: '2'
				},
				{
					id: 2,
					title: '【团购优惠】精品小包全天 3小时',
					image: '/static/temp/ktv_package2.jpg',
					tags: ['周末节假日通用', '小包', '纯欢唱'],
					price: '287',
					discount: '4.3折',
					originalPrice: '680',
					promotion: {
						label: '特惠促销',
						desc: '共省393'
					},
					sales: '1'
				},
				{
					id: 3,
					title: '【豪华装修】KTV欢唱 5小时套餐·尊享果盘',
					image: '/static/temp/ktv_package3.jpg',
					tags: ['周末节假日通用', '小包', '纯欢唱'],
					price: '341',
					discount: '5.8折',
					originalPrice: '588',
					promotion: {
						label: '特惠促销',
						desc: '共省247'
					},
					sales: '1'
				},
				{
					id: 4,
					title: '【豪华装修】KTV欢唱 4小时套餐',
					image: '/static/temp/ktv_package4.jpg',
					tags: ['周末节假日通用', '小包', '纯欢唱'],
					price: '257',
					discount: '2.9折',
					originalPrice: '888',
					promotion: {
						label: '特惠促销',
						desc: '共省631'
					},
					sales: null
				}
			],
			bookingTimeSlots: [
				{
					hour: '22:00',
					label: '',
					detail: ''
				},
				{
					hour: '22:30',
					label: '',
					detail: ''
				},
				{
					hour: '23:00',
					label: '',
					detail: ''
				},
				{
					hour: '23:30',
					label: '',
					detail: ''
				},
				{
					hour: '00:00',
					label: '次日',
					detail: ''
				},
				{
					hour: '00:30',
					label: '次日',
					detail: ''
				},
				{
					hour: '01:00',
					label: '次日',
					detail: ''
				},
				{
					hour: '01:30',
					label: '次日',
					detail: ''
				}
			]
		};
	},
	computed: {
		selectedDate() {
			return `${this.dateList[this.selectedDateIndex].value} (${this.dateList[this.selectedDateIndex].label})`;
		},
		selectedTime() {
			return `${this.timeSlots[this.selectedTimeIndex].range} (${this.timeSlots[this.selectedTimeIndex].desc})`;
		},
		refundPolicy() {
			return `${this.dateList[this.selectedDateIndex].value} (今天) 23:30 前免费退款，支持改订`;
		},
		discountAmount() {
			if (!this.selectedPackage.originalPrice) return 226;
			return parseInt(this.selectedPackage.originalPrice) - parseInt(this.selectedPackage.price || 0);
		},
		totalPrice() {
			return parseInt(this.selectedPackage.originalPrice || this.selectedPackage.price || 300);
		},
		finalPrice() {
			return parseInt(this.selectedPackage.price || 76);
		}
	},
	onLoad(options) {
		if (options.id) {
			this.ktvId = options.id;
		}
		if (options.name) {
			this.ktvInfo.name = decodeURIComponent(options.name);
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		addFavorite() {
			uni.showToast({
				title: '已收藏',
				icon: 'success'
			});
		},
		shareKTV() {
			uni.showToast({
				title: '分享功能',
				icon: 'none'
			});
		},
		showMore() {
			uni.showToast({
				title: '更多功能',
				icon: 'none'
			});
		},
		viewPhotos() {
			uni.showToast({
				title: '查看相册',
				icon: 'none'
			});
		},
		callKTV() {
			uni.showToast({
				title: '拨打电话',
				icon: 'none'
			});
		},
		navigateToKTV() {
			uni.showToast({
				title: '导航功能',
				icon: 'none'
			});
		},
		switchTab(index) {
			this.currentTab = index;
		},
		switchCategory(index) {
			this.currentCategory = index;
		},
		selectDate(index) {
			this.selectedDateIndex = index;
		},
		selectTime(index) {
			this.selectedTimeIndex = index;
		},
		selectRoom(room) {
			console.log('selectRoom 被调用了', room);
			console.log('当前 showBookingPopup 状态:', this.showBookingPopup);

			if (room.status === '已满') {
				uni.showToast({
					title: '该房型已满，请选择其他房型',
					icon: 'none'
				});
				return;
			}

			// 设置选中的套餐信息用于弹窗显示
			this.selectedPackage = {
				title: `经典小包 | 19:00至次日02:00内任选2小时 | 纯欢唱套餐`,
				originalPrice: '300',
				price: '76'
			};

			console.log('设置 selectedPackage:', this.selectedPackage);

			this.showBookingPopup = true;

			console.log('设置后 showBookingPopup 状态:', this.showBookingPopup);

			// 添加一个确认提示，确保方法被执行
			uni.showToast({
				title: '正在打开预订弹窗...',
				icon: 'none',
				duration: 1000
			});
		},
		testPopup() {
			console.log('测试弹窗被点击');
			this.selectedPackage = {
				title: '测试套餐',
				originalPrice: '300',
				price: '76'
			};
			this.showBookingPopup = true;
			console.log('showBookingPopup设置为:', this.showBookingPopup);
		},
		selectBookingTime(index) {
			this.selectedBookingTimeIndex = index;
		},
		closeBookingPopup() {
			this.showBookingPopup = false;
		},
		selectPayment(type) {
			this.selectedPayment = type;
		},
		confirmBooking() {
			uni.showToast({
				title: '预订成功！',
				icon: 'success'
			});
			this.showBookingPopup = false;
		},
		buyPackage(package_) {
			console.log('团购抢购被点击', package_);
			this.selectedGroupPackage = package_;
			this.showGroupBuyPopup = true;
		},
		confirmGroupBuy() {
			uni.showToast({
				title: '抢购成功！',
				icon: 'success'
			});
			this.showGroupBuyPopup = false;
		},
		closeGroupBuyPopup() {
			this.showGroupBuyPopup = false;
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background: #f5f5f5;
	min-height: 100vh;
}

// 导航栏
.nav-header {
	background-color: #fff;
	padding-top: var(--status-bar-height);
	position: sticky;
	top: 0;
	z-index: 999;

	.nav-content {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 30rpx;

		.search-wrapper {
			flex: 1;
			margin: 0 20rpx;
		}

		.nav-icons {
			display: flex;
			align-items: center;
			gap: 24rpx;
		}
	}
}

// KTV信息区域
.ktv-info-section {
	background: #fff;
	padding: 30rpx;

	.ktv-main-info {
		display: flex;
		margin-bottom: 24rpx;

		.ktv-image {
			position: relative;
			width: 200rpx;
			height: 150rpx;
			margin-right: 24rpx;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

			.photo-overlay {
				position: absolute;
				bottom: 8rpx;
				right: 8rpx;
				background: rgba(0, 0, 0, 0.6);
				color: #fff;
				font-size: 22rpx;
				padding: 6rpx 12rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				gap: 6rpx;
			}
		}

		.ktv-details {
			flex: 1;

			.ktv-title {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.ktv-name {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
					margin-right: 12rpx;
				}

				.verified-badge {
					width: 32rpx;
					height: 32rpx;
					background: #1890ff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.ranking-info {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				color: #fa436a;
				font-size: 24rpx;
			}

			.rating-info {
				display: flex;
				justify-content: space-between;

				.stars {
					display: flex;
					align-items: center;
					gap: 12rpx;
					font-size: 24rpx;
					color: #666;
				}

				.category-tag {
					display: flex;
					align-items: center;
					gap: 8rpx;
					background: #f0f0f0;
					padding: 8rpx 16rpx;
					border-radius: 16rpx;
					font-size: 22rpx;
					color: #666;
				}
			}
		}
	}

	.business-info {
		.business-hours {
			display: flex;
			align-items: center;
			gap: 16rpx;
			margin-bottom: 16rpx;
			font-size: 28rpx;

			.status {
				color: #00c853;
				font-weight: 600;
			}

			.hours {
				color: #333;
			}

			.platform {
				color: #1890ff;
			}

			.info-action {
				display: flex;
				align-items: center;
				gap: 8rpx;
				color: #666;
				font-size: 24rpx;
				margin-left: auto;
			}
		}

		.address-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;
			font-size: 28rpx;
			color: #333;
		}

		.distance-info {
			display: flex;
			align-items: center;
			gap: 8rpx;
			margin-bottom: 24rpx;
			font-size: 24rpx;
			color: #666;
			justify-content: space-between;

			.distance-info-left {
				display: flex;
				align-items: center;
				gap: 8rpx;
			}

			.action-buttons {
				display: flex;
				justify-content: flex-end;
				gap: 48rpx;

				.action-btn {
					display: flex;
					align-items: center;
					gap: 8rpx;
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}
}

// 选项卡导航
.tab-navigation {
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;

	.tab-items {
		display: flex;
		align-items: center;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 32rpx 0;
			font-size: 32rpx;
			color: #666;
			border-bottom: 4rpx solid transparent;
			transition: all 0.3s;

			&.active {
				color: #fa436a;
				border-bottom-color: #fa436a;
			}
		}
	}
}

// 日期选择器
.date-selector {
	background: #fff;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.date-list {
		display: flex;
		align-items: center;

		.date-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 16rpx 20rpx;
			border-radius: 8rpx;
			min-width: 80rpx;
			transition: all 0.3s;

			&.active {
				background: #fa436a;
				color: #fff;

				.date-label,
				.date-value {
					color: #fff;
				}
			}

			.date-label {
				font-size: 22rpx;
				color: #666;
				margin-bottom: 4rpx;
			}

			.date-value {
				font-size: 20rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}
}

// 时间段选择器
.time-selector {
	background: #fff;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.time-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.time-slots {
		display: flex;
		flex-direction: column;
		gap: 16rpx;

		.time-slot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			border: 2rpx solid #f0f0f0;
			border-radius: 12rpx;
			transition: all 0.3s;

			&.active {
				border-color: #fa436a;
				background: rgba(250, 67, 106, 0.02);
			}

			.time-range {
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
			}

			.time-desc {
				font-size: 24rpx;
				color: #666;
				flex: 1;
				margin-left: 20rpx;
			}

			.time-price {
				font-size: 32rpx;
				color: #fa436a;
				font-weight: 600;
			}
		}
	}
}

// 房型选择器
.room-selector {
	background: #fff;
	padding: 20rpx 30rpx;

	.room-title {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.room-list {
		.room-item {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.room-image {
				width: 120rpx;
				height: 90rpx;
				margin-right: 20rpx;
				border-radius: 8rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.room-info {
				flex: 1;

				.room-name {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 8rpx;
					display: block;
				}

				.room-desc {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 12rpx;
					display: block;
				}

				.room-price {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					.current-price {
						font-size: 36rpx;
						color: #fa436a;
						font-weight: 600;
					}

					.time-unit {
						font-size: 24rpx;
						color: #666;
						margin-left: 4rpx;
					}
				}

				.room-status {
					.available {
						color: #00c853;
						font-size: 24rpx;
					}

					.unavailable {
						color: #ff5722;
						font-size: 24rpx;
					}

					.warning {
						color: #ff9800;
						font-size: 24rpx;
					}
				}
			}

			.room-action {
				display: flex;
				align-items: center;

				.book-btn {
					background: #fa436a;
					color: #fff;
					font-size: 28rpx;
					font-weight: 600;
					padding: 16rpx 32rpx;
					border-radius: 24rpx;
					min-width: 100rpx;
					text-align: center;
					transition: all 0.3s;

					&.disabled {
						background: #ccc;
						color: #999;
						opacity: 0.6;
					}
				}
			}
		}
	}
}

// 套餐分类
.package-categories {
	background: #fff;
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.category-item {
		margin-right: 40rpx;
		padding: 16rpx 24rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 20rpx;
		transition: all 0.3s;

		&.active {
			color: #fa436a;
			background: #fff2f0;
		}

		&:last-child {
			margin-right: 0;
		}
	}
}

// 套餐列表
.package-list {
	background: #fff;

	.package-item {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.package-image {
			width: 200rpx;
			height: 150rpx;
			margin-right: 24rpx;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.package-info {
			flex: 1;

			.package-title {
				font-size: 32rpx;
				color: #333;
				font-weight: 600;
				line-height: 1.4;
				margin-bottom: 12rpx;
				display: block;
			}

			.package-tags {
				display: flex;
				align-items: center;
				gap: 12rpx;
				margin-bottom: 12rpx;

				.tag {
					background: #f0f9ff;
					color: #1890ff;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
				}
			}

			.package-price {
				display: flex;
				align-items: center;
				gap: 12rpx;
				margin-bottom: 12rpx;

				.current-price {
					font-size: 40rpx;
					color: #fa436a;
					font-weight: 600;
				}

				.discount {
					background: #fa436a;
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
				}

				.original-price {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}
			}

			.package-promotion {
				display: flex;
				align-items: center;
				gap: 12rpx;
				margin-bottom: 12rpx;

				.promotion-label {
					background: #fa436a;
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
				}

				.promotion-desc {
					font-size: 24rpx;
					color: #fa436a;
				}
			}

			.package-sales {
				.sales-info {
					font-size: 22rpx;
					color: #999;
				}
			}
		}

		.package-action {
			display: flex;
			align-items: flex-end;

			.buy-btn {
				background: #fa436a;
				color: #fff;
				font-size: 28rpx;
				font-weight: 600;
				padding: 16rpx 32rpx;
				border-radius: 24rpx;
				min-width: 120rpx;
				text-align: center;
			}
		}
	}
}

// 占位符内容
.reviews-placeholder,
.recommendations-placeholder {
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 60rpx;
	text-align: center;

	.placeholder-icon {
		margin-bottom: 30rpx;
	}

	.placeholder-text {
		font-size: 32rpx;
		color: #999;
		font-weight: 600;
		margin-bottom: 16rpx;
	}

	.placeholder-desc {
		font-size: 28rpx;
		color: #ccc;
	}
}

// 预订弹窗
.booking-popup {
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	max-height: 80vh;
	overflow-y: auto;

	// .popup-header {
	// 	position: relative;
	// 	padding: 30rpx;
	// 	text-align: center;
	// 	background: linear-gradient(135deg, #d2691e 0%, #8b4513 100%);
	// 	border-radius: 20rpx 20rpx 0 0;

	// 	.popup-close {
	// 		position: absolute;
	// 		top: 30rpx;
	// 		right: 30rpx;
	// 	}

	// 	.popup-notice {
	// 		background: rgba(0, 0, 0, 0.6);
	// 		color: #fff;
	// 		font-size: 24rpx;
	// 		padding: 12rpx 24rpx;
	// 		border-radius: 16rpx;
	// 		display: inline-block;
	// 	}
	// }

	.booking-info {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.ktv-name {
			display: flex;
			align-items: center;
			gap: 8rpx;
			margin-bottom: 16rpx;
			font-size: 24rpx;
			color: #666;
		}

		.booking-details {
			.detail-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
				margin-bottom: 12rpx;
			}

			.selected-info {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 12rpx;
			}

			.booking-policy {
				display: flex;
				align-items: center;
				gap: 8rpx;
				font-size: 24rpx;
				color: #fa436a;
			}
		}
	}

	.time-selection {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.section-title {
			font-size: 28rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.time-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 16rpx;

			.time-slot {
				background: #f5f5f5;
				color: #666;
				font-size: 24rpx;
				padding: 16rpx 12rpx;
				border-radius: 8rpx;
				text-align: center;
				transition: all 0.3s;
				position: relative;

				&.active {
					background: #fa436a;
					color: #fff;
					border: 2rpx solid #fa436a;

					&::before {
						content: '';
						position: absolute;
						left: 8rpx;
						top: 8rpx;
						width: 8rpx;
						height: 8rpx;
						background: #fff;
						border-radius: 50%;
					}
				}

				.time-hour {
					display: block;
					font-size: 28rpx;
					font-weight: 600;
					margin-bottom: 4rpx;
				}

				.time-label {
					display: block;
					font-size: 20rpx;
					color: #fa436a;
				}

				.time-detail {
					display: block;
					font-size: 20rpx;
				}
			}
		}
	}

	.price-summary {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.price-item,
		.discount-item,
		.coupon-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			font-size: 28rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.price {
				color: #333;
				font-weight: 600;
			}

			.discount-price {
				color: #fa436a;
				font-weight: 600;
			}

			.coupon-status {
				color: #999;
				margin-left: auto;
				margin-right: 8rpx;
			}
		}

		.discount-icon,
		.coupon-icon {
			width: 32rpx;
			height: 32rpx;
			border-radius: 4rpx;
			background: #fa436a;
			color: #fff;
			font-size: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;
		}
	}

	.price-total {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.total-line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8rpx;

			.total-left {
				font-size: 24rpx;
				color: #fa436a;
			}

			.total-right {
				font-size: 32rpx;
				color: #fa436a;
				font-weight: 600;
			}
		}

		.service-fee {
			font-size: 22rpx;
			color: #999;
			text-align: right;
		}
	}

	.payment-methods {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.payment-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 2rpx solid #f0f0f0;
			border-radius: 12rpx;
			margin-bottom: 16rpx;
			transition: all 0.3s;

			&.active {
				border-color: #fa436a;
				background: rgba(250, 67, 106, 0.02);
			}

			&:last-child {
				margin-bottom: 0;
			}

			.payment-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 8rpx;
				background: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				&.quick {
					background: #fff2f0;
				}

				&.monthly {
					background: #1890ff;
					color: #fff;
					font-size: 20rpx;
					font-weight: 600;
				}
			}

			.payment-info {
				flex: 1;

				.payment-title {
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 8rpx;
				}

				.payment-desc {
					font-size: 22rpx;
					color: #666;
					margin-bottom: 8rpx;
				}

				.payment-bonus {
					background: #fff2f0;
					color: #fa436a;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
					display: inline-block;
				}

				.payment-benefits {
					display: flex;
					gap: 12rpx;
					flex-wrap: wrap;

					text {
						background: #fff2f0;
						color: #fa436a;
						font-size: 20rpx;
						padding: 4rpx 8rpx;
						border-radius: 4rpx;
					}
				}
			}

			.payment-check {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background: #fa436a;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0;
				transition: all 0.3s;
			}

			&.active .payment-check {
				opacity: 1;
			}
		}
	}

	.booking-footer {
		display: flex;
		align-items: center;
		padding: 30rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

		.total-price {
			flex: 1;

			.total-label {
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
				margin-right: 16rpx;
			}

			.discount-label {
				font-size: 24rpx;
				color: #fa436a;
			}
		}

		.confirm-btn {
			background: #fa436a;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			padding: 20rpx 40rpx;
			border-radius: 24rpx;
			min-width: 200rpx;
			text-align: center;
		}
	}
}

// 团购弹窗
.group-buy-popup {
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	max-height: 80vh;
	overflow-y: auto;

	.package-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.package-title-section {
			display: flex;
			align-items: center;
			gap: 12rpx;
			margin-bottom: 16rpx;

			.package-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
			}

			.package-tags {
				display: flex;
				align-items: center;
				gap: 12rpx;

				.tag {
					background: #f0f9ff;
					color: #1890ff;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
				}
			}
		}

		.package-price-section {
			.price-row {
				display: flex;
				align-items: center;
				gap: 12rpx;
				margin-bottom: 12rpx;

				.current-price {
					font-size: 40rpx;
					color: #fa436a;
					font-weight: 600;
				}

				.discount {
					background: #fa436a;
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
				}

				.original-price {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}

				.sales-count {
					font-size: 22rpx;
					color: #999;
					margin-left: auto;
				}
			}

			.promotion-info {
				display: flex;
				align-items: center;
				gap: 12rpx;

				.promotion-tag {
					background: #fa436a;
					color: #fff;
					font-size: 20rpx;
					padding: 4rpx 8rpx;
					border-radius: 4rpx;
				}

				.promotion-desc {
					font-size: 24rpx;
					color: #fa436a;
				}

				.view-all {
					font-size: 22rpx;
					color: #fa436a;
					margin-left: auto;
				}
			}
		}
	}

	.group-details {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.detail-title {
			font-size: 28rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 12rpx;
		}

		.detail-content {
			.detail-section {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 16rpx;

				.detail-icon {
					font-size: 28rpx;
					color: #fa436a;
					margin-right: 12rpx;
				}

				.detail-info {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.detail-name {
						font-size: 28rpx;
						color: #333;
						font-weight: 600;
					}

					.detail-count {
						font-size: 24rpx;
						color: #666;
					}

					.detail-price {
						font-size: 24rpx;
						color: #666;
					}
				}
			}

			.detail-specs {
				display: flex;
				flex-direction: column;
				gap: 8rpx;

				.spec-item {
					font-size: 24rpx;
					color: #666;
					line-height: 1.5;
				}
			}
		}
	}

	.purchase-notes {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.notes-title {
			font-size: 28rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 12rpx;
		}

		.notes-content {
			display: flex;
			flex-direction: column;
			gap: 8rpx;

			.note-item {
				font-size: 24rpx;
				color: #666;
				line-height: 1.5;
			}
		}
	}

	.image-details {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		text-align: center;

		.details-title {
			font-size: 28rpx;
			color: #333;
			font-weight: 600;
		}
	}

	.market-price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.market-label {
			font-size: 28rpx;
			color: #333;
			font-weight: 600;
		}

		.market-value {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
		}
	}

	.group-buy-footer {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1rpx solid #f0f0f0;

		.footer-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4rpx;
			font-size: 22rpx;
			color: #666;
			margin-right: 40rpx;
		}

		.footer-center {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4rpx;
			font-size: 22rpx;
			color: #666;
			margin-right: 40rpx;
		}

		.footer-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;

			.buy-btn {
				background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
				color: #fff;
				font-size: 28rpx;
				font-weight: 600;
				padding: 20rpx 40rpx;
				border-radius: 30rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				min-width: 160rpx;

				.buy-subtitle {
					font-size: 20rpx;
					color: #fff;
					margin-top: 2rpx;
				}
			}
		}
	}
}
</style>
